<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 14:54:58
 -->
<template>
  <div class="app-container">
    <el-card shadow="never" class="wrapper clearfix">
      <div class="img-warpper">
        <div>
          图片展示
        </div>
      </div>
      <div class="sku-info">
        <h2>{{ dataObj.name }}</h2>
        <div class="margin-t20">
          <el-row>
            <el-col :span="12">
              商品编号: {{ dataObj.code }}
            </el-col>
            <el-col :span="12">
              商品分类: {{ dataObj.catName }}
            </el-col>
          </el-row>
          <el-row class="margin-t10">
            单位: {{ unit }}
          </el-row>
          <el-row class="margin-t10">
            条形码: {{ barcode }}
          </el-row>
        </div>
        <el-divider />
        <Price
          ref="price"
          :price-auto="false"
          :is-edit="false"
          :is-show-title="false"
          :unit-data="unitData"
        />
      </div>
      <el-divider />
      <div>
        <vxe-grid
          class="grid"
          border
          resizable
          highlight-hover-row
          :columns="columnsData"
          :data="stockData"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { Price } from '@/views/bsd/goods/detail/components'
import { getSkuDetailById } from '@/api/goods/goods-sku.js'
import { getPriceList } from './tools.js'

export default {
  name: 'SkuView',
  components: { Price },
  mixins: [oftenuse],
  props: {
    skuid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      stockData: [],
      columnsData: [
        { field: 'stockWarn',
          title: '库存预警',
          children: [
            { field: 'minQtyWarning',
              title: '最小预警', width: 150
            },
            { field: 'maxQtyWarning',
              title: '最大预警', width: 150
            }
          ]
        },
        { field: 'origin',
          title: '期初信息',
          children: [
            { field: 'originQuantity',
              title: '期初库存数量', width: 150
            },
            { field: 'originCostPrice',
              title: '期初成本价', width: 150
            },
            { field: 'originTotalPrice',
              title: '期初总额', width: 150,
              slots: {
                default: ({ row }) => {
                  const { originQuantity, originCostPrice } = row
                  const value = this.$amount(originQuantity).multiply(originCostPrice).format()
                  return [<span>{ value }</span>]
                }
              }
            }
          ]
        }
      ]
    }
  },
  computed: {
    /**
     * 用于显示的单位数据
     */
    unit: function() {
      const data = this.dataObj
      const { unitName, unitMulti } = data
      if (!unitName || unitName === '') return ''
      const unitNameArr = unitName.split(',')
      const unitMultiArr = unitMulti.split(',')
      const baseUnitIndex = unitMultiArr.findIndex(val => { return Number(val) === 1 })
      const baseUnitName = unitNameArr[baseUnitIndex]
      unitMultiArr.forEach((item, index) => {
        const multi = Number(item) || 0
        if (multi > 1) {
          const unitName = unitNameArr[index]
          const unitInfo = `1${unitName} = ${multi}${baseUnitName}`
          unitNameArr[index] = `${unitNameArr[index]}(${unitInfo})`
        }
      })
      return unitNameArr.toString()
    },
    /**
     * 单位数据
     */
    unitData: function() {
      const data = this.dataObj
      const { unitId, unitName, unitMulti } = data
      if (!unitId) return []
      const unitIdArr = unitId.split(',')
      const unitNameArr = unitName.split(',')
      const unitMultiArr = unitMulti.split(',')
      const result = []
      unitIdArr.forEach((val, i) => {
        const obj = { value: unitIdArr[i], label: unitNameArr[i], multi: unitMultiArr[i] }
        result.push(obj)
      })
      return result
    },
    /**
     * 条形码数据
     */
    barcode: function() {
      const data = this.dataObj
      const { unitName, barcode } = data
      if (!barcode) return ''
      const barcodeArr = barcode.split(',')
      const unitNameArr = unitName.split(',')
      barcodeArr.forEach((val, index) => {
        barcodeArr[index] = `${val}(${unitNameArr[index]})`
      })
      return barcodeArr.toString()
    },
    /**
     * 价格数据
     */
    goodspriceList: function() {
      const data = this.dataObj
      return getPriceList(data)
    },
    _stockData: function() {
      return []
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getSkuDetailById(this.skuid).then(res => {
        if (!res.data.flag) return this.$message.error('获取商品明细失败！')
        const { goodssku, goodsStockList } = res.data.data
        this.dataObj = goodssku
        this.stockData = goodsStockList
        const goodspriceList = getPriceList(goodssku)
        this.$refs.price.initData(goodspriceList, this.unitData)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
    position: relative;
    .img-warpper{
        width:560px;
        height:408px;
        position: absolute;
        left:20px; top:20px;
        border-right: solid 1px #eeeeee;
        background: '#cccccc'
    }
    .sku-info{
        padding-left: 580px;
    }
}

</style>

